<template>
  <div class="departments">
    <el-card>
      <template #header>
        <div>组织架构</div>
      </template>
      <!-- <div class="item">
        <div class="name">江苏传智播客</div>
        <div class="manager">负责人</div>
        <el-dropdown class="dropdown">
          <span>
            <span>操作</span>
            <i class="el-icon-arrow-down" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>添加子部门</el-dropdown-item>
              <el-dropdown-item>部门查看</el-dropdown-item>
              <el-dropdown-item>删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div> -->
      <tree-item :item="userinfo" @getDate="getDate" />
      <hr>
      <el-tree :data="treeDate" :props="{label: 'name', children: 'children'}">
        <template v-slot="{data}">
          <!-- <pre>{{ data }}</pre> -->
          <!-- <tree-item :item="data" @getDate="getDate" /> -->
          <tree-item :item="data" @getDate="getDate" />
        </template>
      </el-tree>
    </el-card>
    <!-- 将组织结构的原始数据传递给弹框 -->
    <add :inittree-data="inittreeData" @getDate="getDate" />
  </div>
</template>

<script>
// 导入组织结构员工信息
import { companyDepartment } from '@/api/departments.js'
import treeItem from './commons/treeItem.vue'
import add from './commons/add.vue'
// import { filter } from 'mock/user'
export default {
  components: {
    treeItem, add
  },
  data() {
    return {
      treeDate: [],
      inittreeData: [],
      userinfo: {
        name: '传值',
        manager: '负责人',
        id: '',
        top: true
      }
    }
  },
  created() {
    this.getDate()
  },
  methods: {
    async getDate() {
      const res = await companyDepartment()
      console.log(res, 999)
      // 渲染页面
      this.userinfo.name = res.data.companyName
      // 储存组织架构的原始数据
      this.inittreeData = res.data.depts
      this.treeDate = this.changeData(res.data.depts, '')
    },
    // 树形结构
    changeData(arr, str = '') {
      return arr.filter(item => {
        if (item.pid === str) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.departments{
  padding: 25px;

}
</style>
